<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome</title>
        <style type="text/css" media="screen"> 
            @import "resources/css/custom-theme/jquery-ui-1.8.16.custom.css";
            @import "resources/css/screen.css";
            @import "resources/css/app.css";
            /*
             * Override styles needed due to the mix of three different CSS sources! For proper examples
             * please see the themes example in the 'Examples' section of this site
             */
            .dataTables_info { padding-top: 0; }
            .dataTables_paginate { padding-top: 0; }
            .css_right { float: right; }
            #example_wrapper .fg-toolbar { font-size: 0.8em }
            #theme_links span { float: left; padding: 2px 10px; }
        </style> 
        <script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery.dataTables.min.js"></script>
        <style>
            .ui-autocomplete-loading { background: white url('resources/images/ui-anim_basic_16x16.gif') right center no-repeat; }
        </style>
        <script>
            $(document).ready(function() {
                oTable = $('#resultstable').dataTable({
                        "aaSorting": [[ 0, "desc" ]],
                        "iDisplayLength": 25,
                        "bJQueryUI": true,
                        "bFilter": false,
                        "bLengthChange": false,
                        "bInfo": false
                });
                $( "#tabs" ).tabs();
                $('#searchbutton').button();
            } );
        </script>
    </head>
    <body>
        <div class="container">
            <div id="header-thin" class="span-24">
                <div class="span-10 push-2">
                </div>
                <div class="prepend-13 span-1 last">login</div>
            </div>
            <div id="searchbar" class="push-1">
                <form id="searchform" action="search" method="post">
                    <jsp:include page="includes/searchbar.jsp" />
                </form>
            </div>
            <div id="tabs" class="span-22 push-1">
                <ul>
                    <li><a href="#tabs-1"><c:out value="${athlete.firstName}"/> <c:out value="${athlete.secondName}"/>'s History</a></li>
                    <li><a href="#tabs-2">Analytics</a></li>
                </ul>
                <div id="tabs-1">
                    <table id="resultstable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Race</th>
                                <th>Distance</th>
                                <th>Placing</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="result" items="${results}">
                                <tr>
                                    <td><fmt:formatDate value="${result.raceBean.date}" type="DATE" pattern="yyyy-MMM-dd"/></td>
                                    <td><a href="race?id=<c:out value="${result.race.id}"/>"><c:out value="${result.raceBean.name}"/></a></td>
                                    <td><fmt:formatNumber maxFractionDigits="2" value="${result.raceBean.miles}"/></td>
                                    <td><c:out value="${result.place}"/></td>
                                    <td><fmt:formatNumber minIntegerDigits="2" value="${result.hours}"/>:<fmt:formatNumber minIntegerDigits="2" value="${result.min}"/>:<fmt:formatNumber minIntegerDigits="2" value="${result.sec}"/></td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
                <div id="tabs-2">
                    NOT AVAILABLE IN BETA
                </div>
            </div>
            <div class="span-5">
                <img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
            </div>
        </div>

    </body>
</html>

